<template>
	<div id="regist_body" @click.stop="">
		<div id="regist" @click="closeCategory()">
			<login-top></login-top>
			<div class="regist_content my-flex-col-center ">
				<div class="regist_step">
					<div class="step_title my-flex-between">
						<div class="step_item my-flex-left" :class="[{'active':stepOne==true}]">
							<span class="num">1</span>
							<span>填写账号信息</span>
						</div>
						<div class="step_item my-flex-left" :class="[{'active':stepOne==false}]">
							<span class="num">2</span>
							<span>完善资料</span>
						</div>
						<div class="step_item my-flex-left" :class="[{'active':success==true}]">
							<span class="num">3</span>
							<span>提交成功</span>
						</div>
					</div>
				</div>
				<div class="info_panel">
					<el-form label-width="145px" style="" v-if="!success">
						<div class="login_type my-flex-center">
							<div class="type_select regist_type my-flex-between">
								<label class="label" v-for="item in registType" @click="changeType(item.id)">
									<input type="radio" name="type" v-model="currentType" :value="item.id" :disabled="stepOne==false"/>
									<div class="img"></div><span>{{item.value}}</span>							
								</label>
							</div>
						</div>
						<div class="" v-if="stepOne==true">
							<el-form-item label="手机号：">
								<el-input v-model="params.tel" placeholder="请输入手机号码"></el-input>
							</el-form-item>
							<el-form-item label="企业全称：" v-if="currentType!='personRegister'">
								<el-input v-model="params.realName" :maxlength="30" type="text" placeholder="请输入企业全称"></el-input>
							</el-form-item>
							<el-form-item label="验证码：" class="code">
								<el-input class="getCode" :maxlength="6" v-model="params.code" placeholder="请输入验证码"></el-input>
								<getvalidate :userType="currentType" :tel="params.tel" :realName="params.realName" :type='1' :userCurrentType="userCurrentType" class="btn-default"></getvalidate>

							</el-form-item>
							<el-form-item label="设置密码：">
								<el-input v-model="params.pwd" type="password" placeholder="请输入密码" :maxlength="10"></el-input>
							</el-form-item>
							<el-form-item label="输入密码：">
								<el-input v-model="params.confirmPwd" type="password" placeholder="请再次确认密码" :maxlength="10"></el-input>
							</el-form-item>
							<el-form-item class="profile">
								<input-single-checkbox v-model="test">
									<span @click.prevent="aa">我已阅读并同意</span>
								</input-single-checkbox>
								<span class="base-color">《用户协议》</span>
							</el-form-item>
							<el-form-item label="">
								<div class="next my-flex-center " @click="goNextStep()">
									{{currentType=='personRegister'? '保存' : '下一步'}}
								</div>
							</el-form-item>
						</div>
						<div class="" v-else>
							<el-form-item label="经营类目：">
								<div class="special_item">
									<div class="angel_select" @click.stop="selectCategory()">
										<el-input onfocus="this.blur();" placeholder="请选择经营类目" v-model="category.productCategoryNames"></el-input>
										<img src="../../assets/centers/icon_arrow_spread_mine.png" />
									</div>
									<div class="category_component">
										<category ref="category" :params="params" :obj_="category" key_="productCategoryIds"></category>
									</div>
								</div>

							</el-form-item>
							<el-form-item label="企业简称：">
								<el-input v-model="params.shortName" :maxlength="30" type="text" placeholder="请填写企业简称"></el-input>
							</el-form-item>
							<el-form-item label="统一社会信用代码：">
								<el-input v-model="params.organCode" type="text" placeholder="请填写统一社会信用代码"></el-input>
							</el-form-item>
							<el-form-item label="法人姓名：">
								<el-input v-model="params.contactName" :maxlength="10" type="text" placeholder="请填写法人姓名"></el-input>
							</el-form-item>
							<el-form-item label="法人身份证：">
								<el-input v-model="params.idNo" type="text" placeholder="请填写法人身份证"></el-input>
							</el-form-item>
							<el-form-item label="联系电话：">
								<el-input v-model="params.contactTel" placeholder="请填写联系电话"></el-input>
							</el-form-item>
							<el-form-item label="地址：">
								<div class="addr_select" @click="selectAddress()">
									<el-input placeholder="请选择收货地址" :value="params.addressPre"></el-input>
									<img src="../../assets/centers/icon_arrow_spread_mine.png" />
								</div>

							</el-form-item>
							<el-form-item label="详细地址：">
								<el-input type="textarea" placeholder="请输入详细地址信息" v-model="params.addressDetail"></el-input>
							</el-form-item>
							<el-form-item label="营业执照:">
								<v-imgupload :obj="params"></v-imgupload>
							</el-form-item>
							

							<el-form-item label="">
								<div class="submit my-flex-center" @click="regist">提交</div>
							</el-form-item>
						</div>

					</el-form>
					<div class="sub_success" v-else>
						<div class="my-flex-col-center">
							<img src="../../assets/login/icon_sucess_register.png" />
							<div class="prompt">
								恭喜，注册成功！
							</div>
							<div class="gorouter" @click="changeRouter('/price')">
								去首页逛逛
							</div>
						</div>
					</div>
				</div>

			</div>
			<!--<mapset :model="mapmodel" v-on:selectBack="selectBack"></mapset>-->

		</div>
	</div>
</template>

<script>
	import mapset from '@/components/map/map.vue';
	import category from './category';
	import service from '@/js/common/customerservice.js';
	import getvalidate from '@/components/code/verifycode.vue';
	import bus from '@/js/common/bus.js';
	import loginTop from '@/components/loginTop/index.vue';
	export default {
		components: {
			mapset,
			category,
			getvalidate,
			loginTop
		},
		data() {
			return {
				stepOne: true,
				success: false,
				address: '',
				currentType: 'personRegister',
				userCurrentType: 0,
				registType: [{
					id: 'personRegister',
					value: '货主'
				}, {
					id: 'customer',
					value: '司机'
				}],
				params: {
					code: '',
					productCategoryIds: '',
					productCategoryIdsCN: '',
					pwd: '',
					confirmPwd: '',
					tel: '',
					latitude: '',
					longitude: '',
					addressPre: '', //省市
					addressDetail: '',
					shortName: '', //企业简称
					realName: '', //企业全称:选填
					userName: '', //企业全称:选填
					contactName: '', //联系人名称
					contactTel: '', //联系电话
					businessLicense: '',
					businessLicenseUrl: '',
					idNo: '', //法人身份证
					organCode: '', //企业统一社会信用代码
					visible: false
				},
				category: {
					productCategoryNames: null
				},
				mapmodel: {
					visible: false,
					address: null,
					longitude: 0,
					latitude: 0,
					addressPre: '', //省市
					addressDetail: ''
				},
				test: false
			}
		},
		mounted() {
			this.getCategoryTree();
			bus.$on('test', res => {
				this.selectAddressBack(res);
			})
			setTimeout(() => {
				this.test = true;
			}, 2000)
		},
		beforeRouteEnter(to, from, next) {
			next((vm) => {
				vm.from = from.fullPath;
			})
		},
		methods: {
			...service,
			goNextStep() {
				this.goNext();
			},
			aa() {

			},
			selectCategory() {
				this.$refs.category.show();
			},
			closeCategory() {
				if(this.currentType != 'personRegister' && this.stepOne == false) {
					this.$refs.category.close();
				} else {
					return false
				}

			},
			changeRouter(url) {
				this.$router.push(url);
			},
			changeType(id) {
				console.log(id);
				this.currentType = id;
				if(this.currentType == 'personRegister') {
					this.userCurrentType = 0;
				} else {
					this.userCurrentType = 1;
				}
				console.log(this.currentType);
			},
			//			selectAddress() {
			//				this.mapmodel.visible = true;
			//				this.mapmodel.longitude = this.params.longitude;
			//				this.mapmodel.latitude = this.params.latitude;
			//				this.mapmodel.address = this.params.addressPre;
			//			},
			//			selectBack(model) {
			//				this.params.addressPre = model.address;
			//				this.params.latitude = model.longitude;
			//				this.params.longitude = model.latitude;
			//			},
			selectAddress() {
				if(this.params.longitude) {
					let mapmodel = {
						longitude: this.params.longitude,
						latitude: this.params.latitude,
						address: this.params.addressPre
					}
					this.selectAddressShow(mapmodel);
				} else {
					this.selectAddressShow();
				}
			},
			selectAddressBack(model) {
				//				debugger
				this.params.addressPre = model.address;
				this.params.latitude = model.latitude;
				this.params.longitude = model.longitude;
			}
		}
	}
</script>

<style src="../../less/page/common/regist.less" lang="less"></style>